<template>
  <view class="vaccine-container">
    <!-- 状态栏占位符 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 顶部区域 -->
    <view class="header">
      <view class="header-back" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="header-title">疫苗接种</text>
      <view class="header-right"></view>
    </view>
    
    <!-- 标签页切换 -->
    <view class="tabs">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'upcoming' }"
        @tap="activeTab = 'upcoming'"
      >
        <text class="tab-text">待接种</text>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'completed' }"
        @tap="activeTab = 'completed'"
      >
        <text class="tab-text">已接种</text>
      </view>
    </view>
    
    <!-- 宝宝信息提示 -->
    <view v-if="!hasBabyInfo" class="no-baby-info">
      <text class="info-text">请先添加宝宝信息以获取个性化疫苗接种计划</text>
      <button class="add-baby-btn" @tap="navigateTo('/auntMom/pages/babyInfo/babyInfo')">添加宝宝信息</button>
    </view>
    
    <!-- 待接种标签页内容 -->
    <view v-if="activeTab === 'upcoming' && hasBabyInfo" class="tab-content">
      <!-- 近期提醒 -->
      <view v-if="upcomingVaccines.length > 0" class="upcoming-section">
        <view v-for="(vaccine, index) in upcomingVaccines" :key="index" class="vaccine-card">
          <view class="vaccine-header">
            <view class="vaccine-left">
              <text class="vaccine-name">{{ vaccine.name }}</text>
              <text class="vaccine-time">{{ formatTimeRange(vaccine) }}</text>
            </view>
            <view class="vaccine-status" :class="getStatusClass(vaccine)">
              {{ getStatusText(vaccine) }}
            </view>
          </view>
          <view class="vaccine-body">
            <view class="vaccine-info">
              <text class="info-label">接种时间：</text>
              <text class="info-value">{{ vaccine.scheduled_date || '待安排' }}</text>
            </view>
            <view class="vaccine-info">
              <text class="info-label">接种剂次：</text>
              <text class="info-value">{{ vaccine.dose }}剂</text>
            </view>
            <view class="vaccine-info">
              <text class="info-label">疫苗类型：</text>
              <text class="info-value">{{ vaccine.type === 'free' ? '免费' : '自费' }}</text>
            </view>
          </view>
          <view class="vaccine-footer">
            <button class="detail-btn" @tap="showVaccineDetail(vaccine)">查看详情</button>
            <button 
              class="action-btn" 
              :class="{ 'mark-btn': !vaccine.is_completed, 'edit-btn': vaccine.is_completed }"
              @tap="handleVaccineAction(vaccine)"
            >
              {{ !vaccine.is_completed ? '标记已接种' : '编辑' }}
            </button>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view v-else class="empty-state">
        <image class="empty-image" src="/static/empty-vaccine.png" mode="aspectFit"></image>
        <text class="empty-text">暂无待接种疫苗</text>
        <text class="empty-desc">已完成全部疫苗接种计划</text>
      </view>
    </view>
    
    <!-- 已接种标签页内容 -->
    <view v-if="activeTab === 'completed' && hasBabyInfo" class="tab-content">
      <!-- 已接种列表 -->
      <view v-if="completedVaccines.length > 0" class="completed-section">
        <view v-for="(vaccine, index) in completedVaccines" :key="index" class="vaccine-card">
          <view class="vaccine-header">
            <view class="vaccine-left">
              <text class="vaccine-name">{{ vaccine.name }}</text>
              <text class="vaccine-time">{{ formatTimeRange(vaccine) }}</text>
            </view>
            <view class="vaccine-status completed">
              已接种
            </view>
          </view>
          <view class="vaccine-body">
            <view class="vaccine-info">
              <text class="info-label">接种日期：</text>
              <text class="info-value">{{ vaccine.actual_date }}</text>
            </view>
            <view class="vaccine-info">
              <text class="info-label">接种剂次：</text>
              <text class="info-value">{{ vaccine.dose }}剂</text>
            </view>
            <view class="vaccine-info">
              <text class="info-label">接种地点：</text>
              <text class="info-value">{{ vaccine.location || '未记录' }}</text>
            </view>
          </view>
          <view class="vaccine-footer">
            <button class="detail-btn" @tap="showVaccineDetail(vaccine)">查看详情</button>
            <button class="action-btn edit-btn" @tap="handleVaccineAction(vaccine)">编辑</button>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view v-else class="empty-state">
        <image class="empty-image" src="/static/empty-vaccine.png" mode="aspectFit"></image>
        <text class="empty-text">暂无已接种疫苗</text>
        <text class="empty-desc">开始记录宝宝的疫苗接种记录</text>
      </view>
    </view>
    
    <!-- 疫苗详情弹窗 -->
    <view v-if="showDetailPopup" class="popup-mask" @tap="closePopup">
      <view class="popup-content" @tap.stop>
        <view class="popup-header">
          <text class="popup-title">疫苗详情</text>
          <text class="popup-close" @tap="closePopup">×</text>
        </view>
        <view class="popup-body">
          <view class="detail-item">
            <text class="detail-label">疫苗名称：</text>
            <text class="detail-value">{{ currentVaccine.name }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">适用年龄：</text>
            <text class="detail-value">{{ formatTimeRange(currentVaccine) }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">接种剂次：</text>
            <text class="detail-value">{{ currentVaccine.dose }}剂</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">疫苗类型：</text>
            <text class="detail-value">{{ currentVaccine.type === 'free' ? '免费' : '自费' }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">预防疾病：</text>
            <text class="detail-value">{{ currentVaccine.prevent }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">接种状态：</text>
            <text 
              class="detail-value" 
              :class="currentVaccine.is_completed ? 'completed-text' : ''"
            >
              {{ currentVaccine.is_completed ? '已接种' : '待接种' }}
            </text>
          </view>
          <view v-if="currentVaccine.is_completed" class="detail-item">
            <text class="detail-label">接种日期：</text>
            <text class="detail-value">{{ currentVaccine.actual_date }}</text>
          </view>
          <view v-if="currentVaccine.is_completed && currentVaccine.location" class="detail-item">
            <text class="detail-label">接种地点：</text>
            <text class="detail-value">{{ currentVaccine.location }}</text>
          </view>
          <view v-if="currentVaccine.is_completed && currentVaccine.notes" class="detail-item">
            <text class="detail-label">备注信息：</text>
            <text class="detail-value">{{ currentVaccine.notes }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">注意事项：</text>
            <text class="detail-value">{{ currentVaccine.notes_before || '接种前一天给宝宝测量体温，若有发热或其他异常，应暂缓接种。' }}</text>
          </view>
        </view>
        <view class="popup-footer">
          <button 
            class="popup-btn" 
            :class="currentVaccine.is_completed ? 'edit-btn' : 'mark-btn'"
            @tap="handleVaccineAction(currentVaccine)"
          >
            {{ currentVaccine.is_completed ? '编辑记录' : '标记已接种' }}
          </button>
        </view>
      </view>
    </view>
    
    <!-- 标记/编辑弹窗 -->
    <view v-if="showEditPopup" class="popup-mask" @tap="closePopup">
      <view class="popup-content edit-popup" @tap.stop>
        <view class="popup-header">
          <text class="popup-title">{{ currentVaccine.is_completed ? '编辑接种记录' : '标记已接种' }}</text>
          <text class="popup-close" @tap="closePopup">×</text>
        </view>
        <view class="popup-body">
          <view class="form-item">
            <text class="form-label required">接种日期</text>
            <view class="date-picker" @tap="showDatePicker = true">
              <text class="selected-date">{{ editForm.actual_date }}</text>
              <text class="date-arrow">▼</text>
            </view>
          </view>
          <view class="form-item">
            <text class="form-label">接种地点</text>
            <input 
              class="form-input" 
              placeholder="请输入接种地点" 
              v-model="editForm.location"
            />
          </view>
          <view class="form-item">
            <text class="form-label">备注信息</text>
            <textarea 
              class="form-textarea" 
              placeholder="接种后的反应、注意事项等" 
              v-model="editForm.notes"
            />
          </view>
        </view>
        <view class="popup-footer">
          <button class="popup-btn cancel-btn" @tap="closePopup">取消</button>
          <button class="popup-btn save-btn" @tap="saveVaccineRecord">保存</button>
        </view>
      </view>
    </view>
    
    <!-- 日期选择器弹窗 -->
    <view class="date-picker-modal" v-if="showDatePicker">
      <view class="date-picker-mask" @tap="showDatePicker = false"></view>
      <view class="date-picker-content">
        <view class="picker-header">
          <text @tap="showDatePicker = false">取消</text>
          <text>选择日期</text>
          <text @tap="confirmDate">确定</text>
        </view>
        <picker-view 
          class="date-picker-view" 
          :indicator-style="'height: 50px;'" 
          :value="datePickerValue"
          @change="datePickerChange"
        >
          <picker-view-column>
            <view class="picker-item" v-for="(year, index) in years" :key="'year-' + index">{{ year }}年</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="(month, index) in months" :key="'month-' + index">{{ month }}月</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="(day, index) in days" :key="'day-' + index">{{ day }}日</view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, reactive, onMounted } from 'vue';

// 获取状态栏高度
const statusBarHeight = ref(20);

// 标签页切换
const activeTab = ref('upcoming');

// 是否有宝宝信息
const hasBabyInfo = ref(false);

// 弹窗控制
const showDetailPopup = ref(false);
const showEditPopup = ref(false);

// 当前选中的疫苗
const currentVaccine = ref({});
const currentIndex = ref(-1);

// 编辑表单
const editForm = reactive({
  actual_date: formatDateString(new Date()),
  location: '',
  notes: ''
});

// 日期选择器相关
const showDatePicker = ref(false);
const datePickerValue = ref([0, 0, 0]);
const tempDate = ref({ year: new Date().getFullYear(), month: new Date().getMonth() + 1, day: new Date().getDate() });

// 构建年月日选项
const currentYear = new Date().getFullYear();
const years = Array.from({ length: 5 }, (_, i) => currentYear - i);
const months = Array.from({ length: 12 }, (_, i) => i + 1);
const days = computed(() => {
  const daysInMonth = new Date(tempDate.value.year, tempDate.value.month, 0).getDate();
  return Array.from({ length: daysInMonth }, (_, i) => i + 1);
});

// 疫苗数据
const vaccines = ref([]);

// 待接种疫苗
const upcomingVaccines = computed(() => {
  return vaccines.value.filter(v => !v.is_completed);
});

// 已接种疫苗
const completedVaccines = computed(() => {
  return vaccines.value.filter(v => v.is_completed);
});

// 格式化日期函数
function formatDateString(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

// 格式化接种时间范围
const formatTimeRange = (vaccine) => {
  return `${vaccine.start_month}个月${vaccine.end_month ? ' ~ ' + vaccine.end_month + '个月' : ''}`;
};

// 获取状态文本
const getStatusText = (vaccine) => {
  if (vaccine.is_completed) return '已接种';
  
  const babyInfo = getBabyInfo();
  if (!babyInfo.dob) return '待接种';
  
  const birthDate = new Date(babyInfo.dob);
  const today = new Date();
  
  // 计算宝宝月龄
  const monthDiff = (today.getFullYear() - birthDate.getFullYear()) * 12 + today.getMonth() - birthDate.getMonth();
  
  if (monthDiff < vaccine.start_month) {
    return '待接种';
  } else if (vaccine.end_month && monthDiff > vaccine.end_month) {
    return '已过期';
  } else {
    return '应接种';
  }
};

// 获取状态CSS类
const getStatusClass = (vaccine) => {
  const status = getStatusText(vaccine);
  if (status === '待接种') return 'upcoming';
  if (status === '应接种') return 'current';
  if (status === '已过期') return 'overdue';
  return '';
};

// 获取宝宝信息
const getBabyInfo = () => {
  const storedBabyInfo = uni.getStorageSync('babyInfo');
  if (storedBabyInfo) {
    return JSON.parse(storedBabyInfo);
  }
  return {};
};

// 导航函数
const navigateTo = (url) => {
  uni.navigateTo({
    url,
    fail: (err) => {
      console.error('导航失败:', err);
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none'
      });
    }
  });
};

// 返回函数
const goBack = () => {
  uni.navigateBack({
    fail: () => {
      uni.navigateTo({
        url: '/auntMom/pages/home/home'
      });
    }
  });
};

// 显示疫苗详情
const showVaccineDetail = (vaccine) => {
  currentVaccine.value = vaccine;
  showDetailPopup.value = true;
};

// 处理疫苗操作（标记已接种或编辑）
const handleVaccineAction = (vaccine) => {
  currentVaccine.value = vaccine;
  currentIndex.value = vaccines.value.findIndex(v => v.id === vaccine.id);
  
  // 设置表单初始值
  editForm.actual_date = vaccine.actual_date || formatDateString(new Date());
  editForm.location = vaccine.location || '';
  editForm.notes = vaccine.notes || '';
  
  // 设置日期选择器初始值
  if (editForm.actual_date) {
    const parts = editForm.actual_date.split('-');
    const year = parseInt(parts[0]);
    const month = parseInt(parts[1]);
    const day = parseInt(parts[2]);
    
    tempDate.value = { year, month, day };
    
    const yearIndex = years.findIndex(y => y === year);
    const monthIndex = months.findIndex(m => m === month);
    const dayIndex = days.value.findIndex(d => d === day);
    
    datePickerValue.value = [
      yearIndex >= 0 ? yearIndex : 0,
      monthIndex >= 0 ? monthIndex : 0,
      dayIndex >= 0 ? dayIndex : 0
    ];
  }
  
  showDetailPopup.value = false;
  showEditPopup.value = true;
};

// 关闭弹窗
const closePopup = () => {
  showDetailPopup.value = false;
  showEditPopup.value = false;
  showDatePicker.value = false;
};

// 日期选择器变更
const datePickerChange = (e) => {
  const values = e.detail.value;
  tempDate.value.year = years[values[0]];
  tempDate.value.month = months[values[1]];
  tempDate.value.day = days.value[values[2]] || 1;
  
  datePickerValue.value = values;
};

// 确认日期选择
const confirmDate = () => {
  editForm.actual_date = `${tempDate.value.year}-${tempDate.value.month.toString().padStart(2, '0')}-${tempDate.value.day.toString().padStart(2, '0')}`;
  showDatePicker.value = false;
};

// 保存疫苗记录
const saveVaccineRecord = () => {
  if (!editForm.actual_date) {
    uni.showToast({
      title: '请选择接种日期',
      icon: 'none'
    });
    return;
  }
  
  // 更新疫苗记录
  if (currentIndex.value >= 0) {
    vaccines.value[currentIndex.value] = {
      ...vaccines.value[currentIndex.value],
      is_completed: true,
      actual_date: editForm.actual_date,
      location: editForm.location,
      notes: editForm.notes
    };
    
    // 保存到本地存储
    uni.setStorageSync('vaccines', JSON.stringify(vaccines.value));
    
    // 更新提醒列表
    updateReminders();
    
    uni.showToast({
      title: '保存成功',
      icon: 'success',
      success: () => {
        closePopup();
      }
    });
  }
};

// 更新提醒列表
const updateReminders = () => {
  // 加载现有提醒
  let reminders = [];
  const storedReminders = uni.getStorageSync('reminders');
  if (storedReminders) {
    reminders = JSON.parse(storedReminders);
  }
  
  // 移除已完成的疫苗提醒
  reminders = reminders.filter(r => {
    if (r.type === 'vaccine') {
      const relatedVaccine = vaccines.value.find(v => v.id === r.vaccine_id);
      return !relatedVaccine || !relatedVaccine.is_completed;
    }
    return true;
  });
  
  // 为未接种的疫苗创建提醒
  const babyInfo = getBabyInfo();
  if (babyInfo.dob) {
    const birthDate = new Date(babyInfo.dob);
    
    upcomingVaccines.value.forEach(vaccine => {
      // 计算预计接种日期
      const targetDate = new Date(birthDate);
      targetDate.setMonth(targetDate.getMonth() + vaccine.start_month);
      
      // 检查是否已有提醒
      const hasReminder = reminders.some(r => r.type === 'vaccine' && r.vaccine_id === vaccine.id);
      
      // 如果没有提醒且在接种期内，添加提醒
      if (!hasReminder && targetDate >= new Date()) {
        reminders.push({
          type: 'vaccine',
          title: `接种疫苗: ${vaccine.name}`,
          date: formatDateString(targetDate),
          status: 'pending',
          vaccine_id: vaccine.id
        });
      }
    });
  }
  
  // 保存提醒
  uni.setStorageSync('reminders', JSON.stringify(reminders));
};

// 初始化疫苗数据
const initVaccineData = () => {
  // 先检查本地存储
  const storedVaccines = uni.getStorageSync('vaccines');
  if (storedVaccines) {
    vaccines.value = JSON.parse(storedVaccines);
    return;
  }
  
  // 如果没有，创建默认数据
  const defaultVaccines = [
    {
      id: 'v1',
      name: '卡介苗',
      prevent: '结核病',
      start_month: 0,
      end_month: 1,
      dose: 1,
      type: 'free',
      is_completed: false
    },
    {
      id: 'v2',
      name: '乙肝疫苗',
      prevent: '乙型肝炎',
      start_month: 0,
      end_month: null,
      dose: 1,
      type: 'free',
      is_completed: false
    },
    {
      id: 'v3',
      name: '乙肝疫苗',
      prevent: '乙型肝炎',
      start_month: 1,
      end_month: null,
      dose: 2,
      type: 'free',
      is_completed: false
    },
    {
      id: 'v4',
      name: '乙肝疫苗',
      prevent: '乙型肝炎',
      start_month: 6,
      end_month: null,
      dose: 3,
      type: 'free',
      is_completed: false
    },
    {
      id: 'v5',
      name: '脊灰疫苗',
      prevent: '脊髓灰质炎',
      start_month: 2,
      end_month: null,
      dose: 1,
      type: 'free',
      is_completed: false
    },
    {
      id: 'v6',
      name: '脊灰疫苗',
      prevent: '脊髓灰质炎',
      start_month: 3,
      end_month: null,
      dose: 2,
      type: 'free',
      is_completed: false
    },
    {
      id: 'v7',
      name: '脊灰疫苗',
      prevent: '脊髓灰质炎',
      start_month: 4,
      end_month: null,
      dose: 3,
      type: 'free',
      is_completed: false
    },
    {
      id: 'v8',
      name: '百白破疫苗',
      prevent: '百日咳、白喉、破伤风',
      start_month: 3,
      end_month: null,
      dose: 1,
      type: 'free',
      is_completed: false
    },
    {
      id: 'v9',
      name: '百白破疫苗',
      prevent: '百日咳、白喉、破伤风',
      start_month: 4,
      end_month: null,
      dose: 2,
      type: 'free',
      is_completed: false
    },
    {
      id: 'v10',
      name: '百白破疫苗',
      prevent: '百日咳、白喉、破伤风',
      start_month: 5,
      end_month: null,
      dose: 3,
      type: 'free',
      is_completed: false
    },
    {
      id: 'v11',
      name: '麻疹疫苗',
      prevent: '麻疹',
      start_month: 8,
      end_month: null,
      dose: 1,
      type: 'free',
      is_completed: false
    },
    {
      id: 'v12',
      name: '乙脑疫苗',
      prevent: '乙型脑炎',
      start_month: 8,
      end_month: null,
      dose: 1,
      type: 'free',
      is_completed: false
    },
    {
      id: 'v13',
      name: '甲肝疫苗',
      prevent: '甲型肝炎',
      start_month: 18,
      end_month: null,
      dose: 1,
      type: 'free',
      is_completed: false
    }
  ];
  
  vaccines.value = defaultVaccines;
  uni.setStorageSync('vaccines', JSON.stringify(defaultVaccines));
};

// 页面加载
onMounted(() => {
  // 获取状态栏高度
  uni.getSystemInfo({
    success: (res) => {
      statusBarHeight.value = res.statusBarHeight;
    }
  });
  
  // 检查宝宝信息
  const babyInfo = getBabyInfo();
  hasBabyInfo.value = !!babyInfo.name;
  
  // 初始化疫苗数据
  initVaccineData();
  
  // 更新提醒
  updateReminders();
});
</script>

<style lang="scss" scoped>
.vaccine-container {
  min-height: 100vh;
  background-color: #f6f7fb;
  padding-bottom: 30rpx;
}

.status-bar {
  width: 100%;
  background-color: #52c41a;
}

.header {
  height: 100rpx;
  background-color: #52c41a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  position: relative;
  
  .header-back {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .back-icon {
      color: #fff;
      font-size: 40rpx;
      font-weight: bold;
    }
  }
  
  .header-title {
    color: #fff;
    font-size: 36rpx;
    font-weight: bold;
    flex: 1;
    text-align: center;
  }
  
  .header-right {
    width: 60rpx;
  }
}

.tabs {
  display: flex;
  background-color: #fff;
  border-bottom: 2rpx solid #f0f0f0;
  
  .tab-item {
    flex: 1;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    
    .tab-text {
      font-size: 30rpx;
      color: #999;
      position: relative;
      transition: all 0.3s;
    }
    
    &.active {
      .tab-text {
        color: #52c41a;
        font-weight: 500;
      }
      
      &:after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 60rpx;
        height: 6rpx;
        background-color: #52c41a;
        border-radius: 3rpx;
      }
    }
  }
}

.no-baby-info {
  margin: 40rpx 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  text-align: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .info-text {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
    display: block;
  }
  
  .add-baby-btn {
    background-color: #52c41a;
    color: #fff;
    font-size: 28rpx;
    width: 240rpx;
    height: 70rpx;
    line-height: 70rpx;
    border-radius: 35rpx;
  }
}

.tab-content {
  padding: 20rpx 30rpx 0;
}

.upcoming-section, .completed-section {
  .vaccine-card {
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
    
    .vaccine-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 30rpx;
      border-bottom: 2rpx dashed #f0f0f0;
      
      .vaccine-left {
        .vaccine-name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          display: block;
        }
        
        .vaccine-time {
          font-size: 24rpx;
          color: #999;
          margin-top: 6rpx;
          display: block;
        }
      }
      
      .vaccine-status {
        font-size: 24rpx;
        padding: 6rpx 16rpx;
        border-radius: 6rpx;
        background-color: #f0f0f0;
        color: #999;
        
        &.upcoming {
          background-color: #e6f7ff;
          color: #1890ff;
        }
        
        &.current {
          background-color: #f6ffed;
          color: #52c41a;
        }
        
        &.overdue {
          background-color: #fff1f0;
          color: #f5222d;
        }
        
        &.completed {
          background-color: #f6ffed;
          color: #52c41a;
        }
      }
    }
    
    .vaccine-body {
      padding: 20rpx 30rpx;
      
      .vaccine-info {
        display: flex;
        margin-bottom: 10rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .info-label {
          font-size: 26rpx;
          color: #999;
          width: 150rpx;
        }
        
        .info-value {
          font-size: 26rpx;
          color: #333;
          flex: 1;
        }
      }
    }
    
    .vaccine-footer {
      display: flex;
      padding: 20rpx 30rpx;
      border-top: 2rpx solid #f0f0f0;
      
      .detail-btn, .action-btn {
        flex: 1;
        height: 70rpx;
        border-radius: 35rpx;
        font-size: 28rpx;
        line-height: 70rpx;
      }
      
      .detail-btn {
        background-color: #f5f5f5;
        color: #666;
        margin-right: 20rpx;
      }
      
      .action-btn {
        &.mark-btn {
          background-color: #52c41a;
          color: #fff;
        }
        
        &.edit-btn {
          background-color: #1890ff;
          color: #fff;
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 0;
  
  .empty-image {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 20rpx;
  }
  
  .empty-text {
    font-size: 30rpx;
    color: #999;
    font-weight: 500;
    margin-bottom: 10rpx;
  }
  
  .empty-desc {
    font-size: 24rpx;
    color: #bbb;
  }
}

.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .popup-content {
    width: 80%;
    max-width: 600rpx;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    
    &.edit-popup {
      width: 85%;
    }
    
    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 2rpx solid #f0f0f0;
      
      .popup-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        flex: 1;
        text-align: center;
      }
      
      .popup-close {
        font-size: 40rpx;
        color: #999;
        width: 60rpx;
        text-align: right;
      }
    }
    
    .popup-body {
      padding: 30rpx;
      max-height: 70vh;
      overflow-y: auto;
      
      .detail-item {
        margin-bottom: 20rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .detail-label {
          font-size: 28rpx;
          color: #999;
          margin-bottom: 6rpx;
          display: block;
        }
        
        .detail-value {
          font-size: 28rpx;
          color: #333;
          
          &.completed-text {
            color: #52c41a;
          }
        }
      }
      
      .form-item {
        margin-bottom: 25rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .form-label {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 12rpx;
          display: block;
          
          &.required:after {
            content: "*";
            color: #f5222d;
            margin-left: 6rpx;
          }
        }
        
        .form-input {
          width: 100%;
          height: 80rpx;
          background-color: #f5f7fa;
          border-radius: 10rpx;
          padding: 0 20rpx;
          font-size: 28rpx;
          color: #333;
          box-sizing: border-box;
        }
        
        .form-textarea {
          width: 100%;
          height: 160rpx;
          background-color: #f5f7fa;
          border-radius: 10rpx;
          padding: 20rpx;
          font-size: 28rpx;
          color: #333;
          box-sizing: border-box;
        }
        
        .date-picker {
          width: 100%;
          height: 80rpx;
          background-color: #f5f7fa;
          border-radius: 10rpx;
          padding: 0 20rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
          
          .selected-date {
            font-size: 28rpx;
            color: #333;
          }
          
          .date-arrow {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
    
    .popup-footer {
      display: flex;
      padding: 20rpx 30rpx;
      border-top: 2rpx solid #f0f0f0;
      
      .popup-btn {
        flex: 1;
        height: 80rpx;
        border-radius: 40rpx;
        font-size: 28rpx;
        line-height: 80rpx;
        
        &.cancel-btn {
          background-color: #f5f5f5;
          color: #666;
          margin-right: 20rpx;
        }
        
        &.save-btn {
          background-color: #52c41a;
          color: #fff;
        }
        
        &.mark-btn {
          background-color: #52c41a;
          color: #fff;
        }
        
        &.edit-btn {
          background-color: #1890ff;
          color: #fff;
        }
      }
    }
  }
}

.date-picker-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  
  .date-picker-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .date-picker-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    overflow: hidden;
    
    .picker-header {
      display: flex;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: 2rpx solid #f0f0f0;
      
      text {
        font-size: 28rpx;
        
        &:first-child {
          color: #999;
        }
        
        &:nth-child(2) {
          font-weight: bold;
          color: #333;
        }
        
        &:last-child {
          color: #52c41a;
          font-weight: 500;
        }
      }
    }
    
    .date-picker-view {
      width: 100%;
      height: 400rpx;
    }
    
    .picker-item {
      line-height: 50px;
      text-align: center;
      font-size: 28rpx;
    }
  }
}
</style> 